export default class CustomPopupMenu {
    constructor(stage) {
        this.stage = stage;
        this.createDOM(); // 创建菜单 DOM
        this.hide();      // 默认隐藏
        this.bindEvents();// 绑定菜单项点击事件
    }

    // 创建菜单 DOM 结构
    createDOM() {
        this.menuEl = document.createElement('div');
        this.menuEl.className = 'custom-popup-menu';
        document.body.appendChild(this.menuEl);
    }

    // 设置菜单内容 HTML
    setHtml(html) {
        this.menuEl.innerHTML = html;
        // 重新绑定菜单项事件（内容更新后）
        this.bindMenuItemEvents();
    }

    // 绑定菜单项点击事件
    bindMenuItemEvents() {
        // 清空原有事件（避免重复绑定）
        this.menuEl.querySelectorAll('.menu-item').forEach(item => {
            item.onclick = () => {
                const text = item.textContent.trim();
                // 触发自定义 select 事件（模拟原组件的 select 事件）
                this.dispatchEvent('select', { item: text });
                this.hide(); // 点击后隐藏菜单
            };
        });
    }

    // 自定义事件触发（模拟原生事件）
    dispatchEvent(eventName, detail) {
        const event = new CustomEvent(eventName, { detail });
        this.menuEl.dispatchEvent(event);
    }

    // 监听事件（对外暴露，类似原组件的 addEventListener）
    on(eventName, callback) {
        this.menuEl.addEventListener(eventName, (e) => callback(e.detail));
    }

    // 在指定坐标显示菜单
    showAt(x, y) {
        this.menuEl.style.left = `${x}px`;
        this.menuEl.style.top = `${y}px`;
        this.menuEl.style.display = 'block';
    }

    // 隐藏菜单
    hide() {
        this.menuEl.style.display = 'none';
    }

    // 绑定全局关闭逻辑（点击空白处/其他元素）
    bindEvents() {
        // 监听 Stage 的点击事件，隐藏菜单
        this.stage.inputSystem.addEventListener('pointerdown', () => {
            this.hide();
        });
    }

    // 销毁控件
    destroy() {
        document.body.removeChild(this.menuEl);
    }
}
